<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Triangle</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="message">按空格播放暂停,按H进行修改,按R隐藏信息</div>
    <div class="container">
        <h1 class="name">Empty - Love</h1>
        <h3 class="info">Lulleaux / Kid Princess</h3>
        <div class="canvas-container">
            <canvas id="canvas"></canvas>
        </div>
    </div>
    <div class="debug-panel hide">
        <div class="debug-item">
            <label>背景颜色(不选择图片时显示):</label>
            <input type="color" id="backColor" value="#666666">
        </div>
        <div class="debug-item">
            <label>三角形颜色：</label>
            <input type="color" id="TriangleColor" value="#333333">
        </div>
        <div class="debug-item">
            <label>进度条颜色：</label>
            <input type="color" id="progressColor" value="#444444">
        </div>
        <div class="debug-item">
            <label>标题文本：</label>
            <input type="text" id="nametext" value="">
        </div>
        <div class="debug-item">
            <label>信息文本：</label>
            <input type="text" id="infotext" value="">
        </div>
        <div class="debug-item">
            <label>标题颜色：</label>
            <input type="color" id="nameColor" value="#ffffff">
        </div>
        <div class="debug-item">
            <label>信息颜色：</label>
            <input type="color" id="infoColor" value="#ffffff">
        </div>
        <div class="debug-item">
            <label>背景图片：</label>
            <input type="file" id="backImage" accept="image/*">
        </div>
        <div class="debug-item">
            <label>音乐文件：</label>
            <input type="file" id="audioFile" accept="audio/*">
        </div>
        <div class="debug-item">
            <label>背景模糊度：</label>
            <input type="range" id="blurAmount" min="0" max="20" value="5">
            <span id="blurValue">5px</span>
        </div>
        <div class="debug-item">
            <label>背景亮度：</label>
            <input type="range" id="backgroundOpacity" min="0" max="1" step="0.1" value="0.5">
            <span id="opacityValue">0.5</span>
        </div>
        <div class="debug-item">
            <label>
                <input type="checkbox" id="useRandomData">
                是否启用数据随机化
            </label>
        </div>
    </div>
    <audio src="source.m4s" id="audio" crossOrigin="anonymous"></audio>
</body>
<script src="main.js"></script>

</html>